﻿function COverlay(options) {
    var self = this;
    this.GuidGenerator = function () {
        var S4 = function () {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        };
        return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    };
    this._container = 'body';
    this._options = {
        id: self.GuidGenerator(),
        autoShow: true,
        text: {
            value: "",
            style: ""
        },
        loading: {
            show: true,
            fn: function () { },
            tooltip: ''
        },
        stop: {
            show: false,
            fn: function ($this) { },
            tooltip: 'Click here to cancel'
        },
        OnlyOne: false,
        zIndex: 999
    };
    $.extend(true, self._options, options);
    this._overlayID = "COverlay-" + self._options.id;
    this._template = '';
    this._template += '<div id="[ID]" class="COverlay" style="display:none; z-index:[zIndex];">';
    this._template += '<div class="COverlay-Text" style="[COverlay-Text-Style]">[COverlay-Text]</div>';
    if (self._options.loading.show) {
        this._template += ''
        + '<div class="COverlay-Loading" title="[LOADING-TOOLTIP]">'
            +'<div></div>'
        + '</div>';
    }
    if (self._options.stop.show) {
        this._template += '<div class="COverlay-Stop" title="[STOP-TOOLTIP]"></div>';
    }
    this._template += '</div>';
    this.GetHtml = function () {
        var _id = self._overlayID;
        var _loading_tooltip = self._options.loading.tooltip;
        var _stop_tooltip = self._options.stop.tooltip;
        var _zIndex = self._options.zIndex;
        var text = self._options.text.value;
        var text_style = self._options.text.style;
        var template = self._template;
        template = template.replace(/\[ID\]/g, _id);
        template = template.replace(/\[COverlay-Text\]/g, text);
        template = template.replace(/\[COverlay-Text-Style\]/g, text_style);
        template = template.replace(/\[LOADING-TOOLTIP\]/g, _loading_tooltip);
        template = template.replace(/\[STOP-TOOLTIP\]/g, _stop_tooltip);
        template = template.replace(/\[zIndex\]/g, _zIndex);
        return template;
    };
    this.Show = function () {
        var container = self._container;
        var _overlayID = "#" + self._overlayID;
        var $overlay = $(container).find(_overlayID);
        if (self._options.OnlyOne) {
            var display = $overlay.css("display");
            if (display == "none") {
                $overlay.show();
            }
            else {
                var count = parseInt($overlay.attr("count")) || 1;
                $overlay.attr("count", (count + 1));
            }
        }
        else {
            $overlay.show();
        }
        setTimeout(function () {
            self.Reposition();
        }, 500);

    };
    this.Hide = function () {
        var container = self._container;
        var _overlayID = "#" + self._overlayID;
        var $overlay = $(container).find(_overlayID);
        if (self._options.OnlyOne) {
            var count = parseInt($overlay.attr("count")) || 1;
            if (count == 1) {
                window.setTimeout(function () {
                    $overlay.hide();
                }, 500);
            }
            else {
                $overlay.attr("count", (count - 1));
            }
        }
        else {
            $overlay.hide();
        }
    };
    this.Remove = function () {
        var container = self._container;
        var _overlayID = "#" + self._overlayID;
        $(container).find(_overlayID).remove();
    };
    this.Event = function () {
        var container = self._container;
        var _overlayID = "#" + self._overlayID;
        var fn_stop = self._options.stop.fn;
        $(container).find(_overlayID).find(".COverlay-Stop").live("click", function () {
            if (typeof fn_stop == "function")
                fn_stop($(_overlayID));
            self.Hide();
        });
    };
    this.SetText = function (text) {
        var container = self._container;
        var _overlayID = "#" + self._overlayID;
        $(container).find(_overlayID).find(".COverlay-Text").text(text);
    };
    this.Reposition = function () {
        var container = self._container;
        var _overlayID = "#" + self._overlayID;
        var _height = $(window).height();
        var _width = $(window).width();
        if (container != "body") {
            _height = $(container).height();
            _width = $(container).width();
        }
        var top = _height / 2 - 32;
        var left = _width / 2 - 27;
        // IE6 fix
        if ($.browser.msie && parseInt($.browser.version) <= 6)
            top = top + $(window).scrollTop();
        $(container).find(_overlayID).find(".COverlay-Loading,.COverlay-Stop").css({
            top: top + 'px',
            left: left + 'px'
        });
        top = _height / 2 - $(container).find(_overlayID).find(".COverlay-Text").height();
        left = _width / 2 - $(container).find(_overlayID).find(".COverlay-Text").width();
        $(container).find(_overlayID).find(".COverlay-Text").css({
            top: (top - 32) + 'px',
            left: (left + 163) + 'px'
        });
    };
    this.Init = function (container) {
        if (container) {
            self._container = container;
            $(self._container).css("position", "relative");
        }
        var _overlayID = "#" + self._overlayID;
        /* append to container */
        var html = self.GetHtml();
        $(self._container).append(html);
        self.Reposition();
        /* detect */
        if (self._container != "body") {
            $(self._container).find(_overlayID).css("position", "absolute");
        }
        /* auto show or hide */
        if (self._options.autoShow) {
            self.Show();
        }
        /* event click */
        self.Event();
    };
}